<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/datail.css">
</head>
<body>
  <!-- 大头部 -->
  <div class="header_1">
    <div class="head">
      <div class="head_1">
        <ul class="left_1">
          <li><a href="#">欢太品牌</a></li>
          <li><a href="#">欢太云服务</a></li>
          <li><a href="#">软件商店</a></li>
          <li><a href="#">健康</a></li>
        </ul>      
        <ul class="right_1">
          <li><a href="#"> 下载欢太商城APP</a></li>
          <li>
            <i class="iconfont icon-Artboard"></i>
            <a href="./login.html">登录</a>
          </li>
          <li><a href="./login.html">注册</a></li>
          <li>
            <i class="iconfont icon-che"></i>
            <a href="#">购物车</a>
          </li>
        </ul>
      </div>
    </div>
    <!--  头部nav -->
  <div class="n-head_2">
    <div class="head_2">
      <div class="logo_2">
        <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/2bdb956.png?x-oss-process=image/format,webp" alt="">
      </div>
      <div class="centre">
        <ul>
          <li><a href="#">OPPO专区</a></li>
          <li><a href="#">OnePlus专区</a></li>
          <li><a href="#">realme专区</a></li>
          <li><a href="#">智能硬件</a></li>
          <li><a href="#">潮流好物</a></li>
          <li><a href="#">服务</a></li>
        </ul>
      </div>
      <div class="rigth_2">
        <form action="" class="parent">
          <input type="text" placeholder="OPPO K9 Pro">
        </form>
      </div>
    </div>
  </div>
  
  </div>   
  <div class="quanbu">
    <div class="box123" id="enalrge">
      <!-- 展示图片盒子 -->
      <div class="show">
        <img src="" alt="">
      </div>
      <!-- 切换列表盒子 -->
      <div class="list">
        <p class="active">
          <img
            src=""
            alt="">
        </p>
        
      </div>
    </div>
    <!-- 右列表 -->
    <div class="logo_right">
      <ul class="recommend">
        <li>OPPO Find X3 Pro凝白12G+ 256G</li>
        <li>
          <p>OPPO手机10元优惠券|满700元可用</p>
          <p>24期免息</p>
          <p>详情&gt;</p>
        </li>
        <li>[OPPO官方商城 | 8+256G限时优惠700元]</li>
        <li>①[旗舰影像]双5000W像素主摄;</li>
        <li>②[超级闪充] 65W超级闪充+30W无线快充;</li>
        <li>③[臻彩屏幕] 10亿色臻彩屏幕搭配120Hz动态帧率。</li>
        <li>Find X3 8+128G版本优惠500元，下单 再减200元&gt;&gt;&gt;</li>
        <li>以旧换新最高额外补贴1380元&gt;&gt;&gt;</li>
        <li><span>5235</span> <span>12412</span></li>
        <li>
          <ol>
            <li>
              <img src="##" alt="">
              <p>摄像头</p>
              <p>10亿色双主摄</p>
            </li>
          </ol>
        </li>
      </ul>
      <h3 style="padding: 10px;">颜色</h3>
      <ul class="rightcolor">
        <!-- 颜色 -->
        <li><a href="">宇宙摩卡</a></li>
        <li><a href="">火星探索版</a></li>
        <li><a href="">镜黑</a></li>
        <li><a href="">凝白</a></li>
        <li><a href="">摄影师版</a></li>
        <li><a href="">雾蓝</a></li>
      </ul>
      <h3 style="padding: 10px;">配置</h3>
      <ul class="rightdeploy">
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
        <li><a href="#">12G + 256G</a></li>
      </ul>
      <h3 style="padding: 10px;">数量</h3>
      <div class="number">
        <button>-</button>
        <p>0</p>
        <button>+</button>
        <p>仅限购5件</p>
      </div>
      <ul class="jiaru">
        <li> <a href="">加入购物车</a></li>
        <li> <a href="">立即购买</a></li>
      </ul>
    </div>
  </div> 
  <script src="../jquery/jquery.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/datail.js"></script>
  <!-- JS 渲染 -->
</body>
</html>